<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>函数组件</title>
</head>

<body>
    <h1>函数组件</h1>
    <hr />
</body>
<div id="demoReact"></div>
<script src="../../node_modules/babel-standalone/babel.min.js"></script>
<script src="../../node_modules/react/umd/react.development.js"></script>
<script src="../../node_modules/react-dom/umd/react-dom.development.js"></script>
<script type="text/babel">

    // 函数组件：返回一个jax对象
    // 函数组件：采用大驼峰命名规则（与普通函数区分）
    function MyDom() {
        return (
            <div>我是一个无状态的组件</div>
        )
    }

    // 使用函数组件
    let com = <div><MyDom/><MyDom/><MyDom/></div>

    // 创建根节点
    let root = ReactDOM.createRoot(document.getElementById("demoReact"));

    // 渲染组件
    root.render(com);

</script>

</html>